import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';
import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';

import { LinkText } from '../../components/common';
import { colors, defaultAvatar } from '../../utils/constants';

const AVATAR_SIZE = 48;
const AVATAR_RADIUS = AVATAR_SIZE / 2;
const PREVIEW_SIZE = 48;
const fakePreviewURL = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514530747958&di=ef1c28d92c01514e79c979b3d2a72f61&imgtype=0&src=http%3A%2F%2Fstatic.66cn.com%2Fupload%2F20170422%2F14928662837726.jpg';

const Root = styled.View`
  flexDirection: row;
  width: 100%;
  backgroundColor: ${colors.WHITE};
  paddingTop: 10;
`;

const Avatar = styled.Image`
  width: ${AVATAR_SIZE};
  height: ${AVATAR_SIZE};
  borderRadius: ${AVATAR_RADIUS};
  borderWidth: 1;
  borderColor: ${colors.HR};
  marginLeft: 10;
`;

const Content = styled.View`
  flex: 1;
  marginLeft: 10;
  borderColor: ${colors.HR};
  borderBottomWidth: ${props => props.isLast ? 0 : 1};
`;

const ActionContent = styled.Text`
  flex: 1;
  fontSize: 15;
  marginHorizontal: 10;
`;

const PeopleLink = styled(LinkText)`
`;

const MessagePreview = styled.View`
  flexDirection: row;
  flex: 1;
`;

const Preview = styled.Image`
  width: ${PREVIEW_SIZE};
  height: ${PREVIEW_SIZE};
  backgroundColor: blue;
  marginRight: 10;
`;

const ActionLine = styled.View`
  flexDirection: row;
  flex: 1;
  marginVertical: 10;
  marginRight: 10;
  alignItems: center;
`;

const DateText = styled.Text`
  flex: 1;
  fontSize: 15;
  color: ${colors.PRIMARY_TEXT_LITE};
`;

const ActionButton = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  paddingHorizontal: 4;
  marginLeft: 14;
`;

class NotificationItem extends Component {

  _toUserDetailView = _id => {
    console.log(`跳转到ID号为 ${_id} 的用户主页。`);
  }

  render() {
    const {
      avatar,
      who = {
        _id: "123",
        nickname: "曾小贤"
      },
      action = "提到了你",
      atList = [
        { _id: "456", nickname: "胡一菲" },
        { _id: "789", nickname: "张益达" },
        { _id: "7890", nickname: "吕子乔" }
      ],
      isFavourite = false,
      isFavouriteEnable = false,
      isCommentEnable = false,
      createDate = "",
      preview = "",
      isLast = false
    } = this.props;

    return (
      <Root>
        <Avatar source={{ uri: avatar || defaultAvatar }} />
        <Content isLast={isLast}>
          <MessagePreview>
            <ActionContent>
              <PeopleLink
                onPressed={() => this._toUserDetailView(who._id)}
              >
                {`${who.nickname} `}
              </PeopleLink>
              {action}
              {
                atList.map(people => (
                  <PeopleLink
                    key={people._id}
                    onPressed={() => this._toUserDetailView(people._id)}
                  >
                    {` ${people.nickname} `}
                  </PeopleLink>)
                )
              }
            </ActionContent>
            <Preview source={{ uri: preview || fakePreviewURL }} />
          </MessagePreview>
          <ActionLine>
            <DateText>{createDate}</DateText>
            {
              isFavouriteEnable &&
              <ActionButton>
              {
                isFavourite ?
                <MaterialCommunityIcons name="thumb-up" size={20}
                    color={isFavourite ? colors.FAVOURITE : colors.PRIMARY_TEXT_LITE} /> :
                <MaterialCommunityIcons name="thumb-up-outline" size={20}
                    color={isFavourite ? colors.FAVOURITE : colors.PRIMARY_TEXT_LITE} />
              }
              </ActionButton>
            }
            {
              isCommentEnable &&
              <ActionButton>
                <MaterialCommunityIcons size={20} color={colors.PRIMARY_TEXT_LITE} name="comment-processing-outline" />
              </ActionButton>
            }
            <ActionButton>
              <Ionicons size={24} color={colors.PRIMARY_TEXT_LITE} name="ios-more" />
            </ActionButton>
          </ActionLine>
        </Content>
      </Root>
    );
  }
}

export default NotificationItem;
